<template>
  <div class="home">
    <!-- 头部 -->
    <div class="home-header">
      <div class="header-search">
        <!-- LOGO -->
        <img class="logo" src="../../images/logo.png" alt="">
        <!-- 搜索 -->
        <van-search @click="toSearch" class="search-header" v-model="value" placeholder="请输入搜索关键词" />
        <!-- 登录 -->
        <van-button class="logonbutton" size="mini" plain hairline type="danger">登录</van-button>
      </div>
      <div class="header-nav">
        <!-- 导航 -->
        <van-tabs v-model:active="active" class="nav-tabs">
          <van-tab class="tabs-item" v-for="navList in store.homeInfoDate.kingKongModule?.kingKongList"
            :key="navList.picUrl" :title="navList.text">
          </van-tab>
        </van-tabs>
        <!-- 下拉框 -->
        <van-dropdown-menu class="nav-menu">
          <van-dropdown-item class="menu-item">
            <div style="{heigh:60px;lineHeight:60px;paddingLeft: 30px;fontSize:28px}">全部频道</div>
            <div class="menu">
              <div class="item-menu" v-for="menuList in store.homeInfoDate.kingKongModule?.kingKongList"
                :key="menuList.picUrl" @click="toNewPages">{{ menuList.text }}</div>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>

      </div>
    </div>

    <!-- 主体 -->
    <div class="home-content">
      <!-- 轮播图 -->
      <div class="content-lunbo">
        <van-swipe class="swipe-lunbo" :autoplay="3000" indicator-color="white" touchable="true">
          <van-swipe-item v-for="lunboList in  store.homeInfoDate.focusList" :key="lunboList.id"><img
              :src="lunboList.picUrl" alt="" /></van-swipe-item>

        </van-swipe>
      </div>
      <!-- 保障栏 -->
      <ul style="{display:flex;display: flex;
            flexWrap: wrap;
            justifyContent:space-around;
            alignItems: center;
            width:100%;height:36px;
            maggin: 0 15px}">
        <li style="{width:114px;height:21px;textAlign:center;fontSize:14px;lineHeight:21px}"
          v-for="homeinfo in store.homeInfoDate.policyDescList" :key="homeinfo.icon">
          <van-icon :name="homeinfo.icon" />
          <span>{{ homeinfo.desc }}</span>
        </li>

      </ul>
      <!-- 商品种类 -->
      <div class="content-goods">
        <div class="goods-item" v-for="goodsList in store.homeInfoDate.kingKongModule?.kingKongList"
          :key="goodsList.picUrl">
          <img :src="goodsList.picUrl" alt="">
          <span>{{ goodsList.text }}</span>
        </div>
      </div>
      <!-- 大图 -->
      <div class="content-big-img">
        <img :src="store.homeInfoDate.bigPromotionModule?.floorList[0].cells[0].picUrl" alt="" />
      </div>
      <!-- 新人专享 -->
      <div class="content-freshmanModule">
        <h2>
          <van-icon name="minus" />
          新人专享
          <van-icon name="minus" />
        </h2>
        <div class="freshmanModule-content">
          <div class="freshmanModule-left">
            <h3>新人专享礼包</h3>
            <img src="//yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" alt="">
          </div>
          <div class="freshmanModule-right">
            <div class="right-top">
              <h3>{{ store.homeInfoDate?.indexActivityModule && store.homeInfoDate?.indexActivityModule[0].title }}</h3>
              <span>{{
                store.homeInfoDate?.indexActivityModule && store.homeInfoDate?.indexActivityModule[0].subTitle
              }}</span>
            </div>
            <div class="right-bottom">
              <h3>{{ store.homeInfoDate?.indexActivityModule && store.homeInfoDate?.indexActivityModule[1].title }}</h3>
              <span>{{
                store.homeInfoDate?.indexActivityModule && store.homeInfoDate?.indexActivityModule[1].tag
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 热销榜单 -->
      <div class="content-module">
        <h2>
          <!-- 类目热榜 -->
          {{ store.homeInfoDate.categoryHotSellModule?.title }}
        </h2>
        <!-- 1 -->
        <div class="module-top">
          <div class="module-top-left"
            v-for="moduleList in store.homeInfoDate.categoryHotSellModule?.categoryList.slice(0, 2) "
            :key="moduleList.picUrl">
            <img :src="moduleList.picUrl" alt="" />
            <span>{{ moduleList.categoryName }}
              <br />
              <van-icon name="minus" />
              <van-icon name="minus" />
            </span>
          </div>
        </div>
        <!-- 2 -->

        <div class="module-bottom">
          <!-- <van-grid :gutter="10">
            <van-grid-item v-for="value in 8" :key="value">
              <van-image src="../../images/mylove.jpg" />
              <span>哈哈</span>
            </van-grid-item>
          </van-grid> -->

          <div class="bottom-content"
            v-for="modBot in store.homeInfoDate.categoryHotSellModule?.categoryList.slice(2, 9)"
            :key="modBot.categoryName">
            <p>{{ modBot.categoryName }}</p>
            <img :src="modBot.showPicUrl" alt="" />
          </div>
        </div>

        <!-- 3 -->
        <div class="module-last">
          <div class="last-left">
            <h5>{{
              store.homeInfoDate.sceneLightShoppingGuideModule &&
                store.homeInfoDate.sceneLightShoppingGuideModule[0]?.styleBanner?.title
            }}
            </h5>
            <span>{{
              store.homeInfoDate.sceneLightShoppingGuideModule &&
                store.homeInfoDate.sceneLightShoppingGuideModule[0]?.styleBanner?.desc
            }}</span>
            <img
              :src="store.homeInfoDate.sceneLightShoppingGuideModule && store.homeInfoDate.sceneLightShoppingGuideModule[0]?.styleBanner?.picUrl" />
          </div>
          <div class="last-right">
            <h5>{{
              store.homeInfoDate.sceneLightShoppingGuideModule &&
                store.homeInfoDate.sceneLightShoppingGuideModule[1]?.styleItem?.title
            }}
            </h5>
            <span>{{
              store.homeInfoDate.sceneLightShoppingGuideModule &&
                store.homeInfoDate.sceneLightShoppingGuideModule[1]?.styleItem?.desc
            }}</span>
            <div class="right">
              <img :src="store.homeInfoDate.sceneLightShoppingGuideModule &&
              store.homeInfoDate.sceneLightShoppingGuideModule[1]?.styleItem?.itemPicBeanList[0]?.picUrl" />
              <img :src="store.homeInfoDate.sceneLightShoppingGuideModule &&
              store.homeInfoDate.sceneLightShoppingGuideModule[1]?.styleItem?.itemPicBeanList[1]?.picUrl" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="home-footer">
      <div class="footer-button">
        <!-- <button>下载APP</button> -->
        <van-button color="#414141" size="normal" plain hairline>下载APP</van-button>
        <van-button color="#414141" size="normal" plain hairline>电脑版</van-button>
      </div>
      <div class="footer-bottom">
        <p>
          网易公司版权所有 © 1997-2023
          <br>
          食品经营许可证：JY13301080111719
        </p>
      </div>
    </div>

  </div>
</template>

<script setup >
import { onMounted } from 'vue'
import { useRouter } from 'vue-router';
import useHomeStore from '../../stores/home'

// 1 将store导入
const store = useHomeStore()
// 2 获取页面数据
onMounted(async () => {
  await store.getHomeData()
});
// 3 点击跳转新的页面
const toNewPages = (e) => {
  console.log(e)
}

const router = useRouter()
const toSearch = () => {
  router.push('/search')
}

</script>
<script>
export default {
  name: 'Home'
}
</script>

<style scoped lang="less">
.home {
  width: 100%;

  // 头部
  .home-header {
    width: 100%;
    height: 58px;

    // 头部搜索
    .header-search {
      display: flex;
      width: 345px;
      padding: 8px 15px;
      height: 20px;

      // 头部搜索logo图
      .logo {
        width: 70px;
        height: 20px;
        margin-right: 10px;
        margin: auto 0;
      }

      // 头部搜索框
      .search-header {
        --van-search-input-height: 20px;
        --van-search-action-text-color: #66666F;
      }

      // 头部搜索登录按钮
      .logonbutton {
        width: 35px;
        margin: auto 0
      }
    }

    // 头部导航
    .header-nav {
      height: 20px;
      width: 375px;
      border-bottom: 1px solid #ccc;
      flex-wrap: nowrap;
      padding-left: 30px;
      box-sizing: border-box;
      display: flex;
      position: relative;

      // 导航
      .nav-tabs {
        width: 345px;
        height: 20px;
        text-align: center;
        display: flex;
        margin: 0;
        padding: 0;

        // .tabs-item {
        //   width: 72px;
        //   height: 20px;
        //   line-height: 20px;
        //   color: #333333;

        // }
      }

      .nav-tabs /deep/.van-tabs__wrap {
        width: 345px;
        height: 18px;
      }

      .nav-tabs /deep/.van-tabs__wrap .van-tabs__nav {
        width: 345px;
        height: 18px;
        font-size: 14px;
        padding: 0;
      }

      .nav-tabs /deep/ .van-tabs__nav .van-tabs__line {
        position: absolute;
        top: 17px;
        line-height: 1px;
        color: #414141;
      }

      // 下拉框
      .nav-menu {
        position: absolute;
        right: 0;
        top: -4px;
        width: 40px;
        height: 24px;
        z-index: 99;
        padding: 5;

        .menu-item {
          .menu {
            display: flex;
            flex-wrap: wrap;
            justify-items: center;
            align-items: center;

            .item-menu {
              margin: 0px 0px 20px 15px;
              width: 73px;
              height: 26px;
              border: 1px solid rgb(219, 214, 214);
              border-radius: 2px;
              font-size: 12px;
              color: #66666F;
              text-align: center;
              line-height: 24px;
              background-color: #FAFAFA;

              &.active {
                border: 1px solid red;
                color: red;
              }
            }


          }

        }

      }

      // 下拉框
      .nav-menu /deep/.van-dropdown-menu__bar {
        width: 100%;
        height: 100%;
        background-color: rgb(248, 252, 255);
      }

      .nav-menu /deep/.van-dropdown-menu__bar .van-dropdown-item .van-popup {
        display: flex;
      }
    }

  }

  // 主体
  .home-content {
    width: 100%;

    // 轮播图
    .content-lunbo {
      width: 100%;
      height: 158px;

      .swipe-lunbo {
        .van-swipe-item {
          width: 100%;
          height: 158px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      // 使用deep方法 改变轮播图地下的形状
      .swipe-lunbo /deep/.van-swipe__indicator {
        width: 19px;
        height: 4px;
        line-height: 6px;
        border-radius: 0;
        color: rgb(232, 229, 229);
      }

      .swipe-lunbo /deep/.van-swipe__indicator--active {
        width: 19px;
        height: 4px;
        border-radius: 0;
        line-height: 6px;
        color: aliceblue;
      }





    }

    // 商品种类
    .content-goods {
      width: 375px;
      height: 175px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding-bottom: 10px;

      .goods-item {
        width: 55px;
        height: 78px;
        margin: 5px 10px;

        img {
          width: 55px;
          height: 55px;
          border-radius: 10px
        }

        span {
          font-size: 12px;
          display: block;
          margin-top: 5px;
          width: 100%;
          height: 17px;
          line-height: 17px;
          text-align: center;
        }
      }
    }

    // 大图
    .content-big-img {
      width: 375px;
      height: 100px;
      text-align: center;

      img {
        width: 100%;
        height: 100%
      }
    }

    // 新人专享
    .content-freshmanModule {
      width: 375px;
      height: 297px;
      margin: 30px auto 0;
      box-sizing: border-box;

      h2 {
        width: 345px;
        height: 45px;
        padding: 0 15px;
        margin: 0 auto;
        font-size: 18px;
        font-weight: 300;
        line-height: 45px;
        text-align: center;
      }

      .freshmanModule-content {
        width: 375px;
        height: 219px;
        display: flex;
        padding: 0 15px;
        box-sizing: border-box;
        justify-content: space-around;
        box-sizing: border-box;

        // 新人专享 左边
        .freshmanModule-left {
          flex: 1;
          width: 50%;
          height: 100%;
          background-color: #F9E9CF;
          position: relative;
          margin-right: 4px;
          border-radius: 5px;

          h3 {
            width: 155px;
            height: 24px;
            font-size: 18px;
            font-weight: 300;
            line-height: 24px;
            margin: 0;
            padding: 15px 0 0 15px;
          }

          img {
            width: 130px;
            height: 129px;
            position: absolute;
            top: 70px;
            left: 22px;

          }
        }

        // 新人专享右边
        .freshmanModule-right {
          flex: 1;
          width: 50%;
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          background-color: #f0f4f6;
          box-sizing: border-box;

          .right-top {
            width: 100%;
            height: 49%;
            background-color: #fbe2d3;
            margin-bottom: 5px;
            border-radius: 5px;


            h3 {
              width: 155px;
              height: 24px;
              font-size: 16px;
              font-weight: 300;
              line-height: 24px;
              margin: 0;
              padding: 15px 0 0 15px;
            }

            span {
              width: 64pxpx;
              height: 16px;
              font-size: 13px;
              color: #ccc;
              line-height: 16px;
              margin: 0 15px;
            }
          }

          .right-bottom {
            width: 100%;
            height: 49%;
            border-radius: 5px;
            background-color: #ffecc2;

            h3 {
              width: 155px;
              height: 24px;
              font-size: 16px;
              font-weight: 300;
              line-height: 24px;
              margin: 0;
              padding: 15px 0 0 15px;
            }

            span {
              width: 64pxpx;
              height: 16px;
              font-size: 13px;
              display: inline-block;
              color: rgb(247, 244, 244);
              line-height: 16px;
              background-color: rgb(218, 186, 186);
              border-radius: 5px;
              margin: 0 15px;
              padding: 2px 4px;
            }
          }


        }
      }

    }

    // 热销榜
    .content-module {
      width: 375px;
      height: 560px;
      padding: 0 15px;
      box-sizing: border-box;

      h2 {
        width: 80px;
        font-size: 16px;
        font-weight: 400;
        height: 50px;
        line-height: 50px;
        margin: 0;
      }

      // 1
      .module-top {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        width: 100%;
        height: 110px;
        box-sizing: border-box;
        margin-bottom: 10px;

        .module-top-left {
          width: 50%;
          height: 100%;
          margin-right: 5px;
          background-color: #F9F3E4;
          position: relative;
          border-radius: 5px;

          span {
            position: absolute;
            top: 40px;
            left: 10px;
            font-size: 13px;
          }

          img {
            width: 100px;
            height: 100px;
            position: absolute;
            bottom: 0;
            right: 0;
          }
        }

        .module-top-right {
          width: 50%;
          height: 100%;
          background-color: #ebeff6;
          position: relative;
          border-radius: 5px;

          span {
            position: absolute;
            top: 40px;
            left: 10px;
            font-size: 13px;
          }

          img {
            width: 100px;
            height: 100px;
            position: absolute;
            bottom: 0;
            right: 0;
          }
        }
      }

      // 2
      .module-bottom {
        width: 355px;
        box-sizing: border-box;
        height: 200px;
        display: flex;
        flex-wrap: wrap;
        flex-wrap: wrap;
        padding-bottom: 20px;

        .bottom-content {
          width: 83px;
          height: 90px;
          box-sizing: border-box;
          margin: 0 5px 5px 0;
          text-align: center;
          background-color: #f5f5f5;

          p {
            width: 100%;
            height: 16px;
            margin: 5px 0 0;
            text-align: center;
            line-height: 16px;
            font-size: 14px;
            margin-bottom: 8px
          }

          ;

          img {
            width: 60px;
            height: 60px;
          }
        }
      }

      // 3
      .module-last {
        width: 345px;
        height: 155px;
        padding: 5px 0 15px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: nowrap;

        .last-left {
          width: 125px;
          height: 155px;
          text-align: center;
          border-radius: 5px;
          padding: 12px 0;
          background-color: #f5f5f5;
          margin-right: 5px;
          box-sizing: border-box;

          h5 {
            font-size: 15px;
            width: 120px;
            height: 24px;
            margin: 0;
            padding: 0 0 0 5px;
            line-height: 24px;
          }

          span {
            font-size: 13px;
            color: #b3afaf;
          }

          img {
            width: 72px;
            height: 72px;
            margin: 15px 24px 0;
          }
        }

        .last-right {
          width: 220px;
          height: 135px;
          padding: 12px 0;
          background-color: #f5f5f5;
          border-radius: 5px;

          h5 {
            font-size: 15px;
            width: 120px;
            height: 24px;
            margin: 0;
            padding: 0 0 0 35px;
            line-height: 24px;
          }

          span {
            font-size: 13px;
            width: 120px;
            height: 15px;
            text-align: left;
            padding: 0 0 0 35px;
            color: #ff6f0f;
            display: inline-block;
          }

          .right {
            display: flex;
            justify-content: space-around;
            flex-wrap: nowrap;

            img {
              width: 72px;
              height: 72px;
            }
          }

        }
      }
    }
  }

  // 底部
  .home-footer {
    width: 375px;
    height: 123px;
    background-color: #414141;
    padding: 27px 10px 14px;
    box-sizing: border-box;

    .footer-button {
      display: flex;
      justify-content: space-around;
      width: 60%;
      height: 20px;
      margin: 0 auto 15px;
    }

    .footer-bottom {
      margin: 0 auto;
      padding: 10px 0;
      width: 60%;

      p {
        font-size: 12px;
        color: #b3afaf;
        text-align: center;
      }
    }
  }
}
</style>
